<template>
	<view class="foodpage">
		
		<!-- 轮播 -->
		<view class="top">
			<swiper class="swiper" next-margin='100rpx' 	>
						<swiper-item>
							<view class="swiper-item">
								<view class="week">
									第一周
								</view>
								<view class="name">
									心肺激活训练
								</view>
								<view class="content">
									胸部，核心，臀部，腿部
								</view>
								<view class="jieduan">
									第1阶段
								</view>
							</view>
						</swiper-item>
						
					</swiper>
		</view>
		
		<!-- 周期 -->
		<view class="weekline">
			
			<view class="week">
				08月01日-08月07日
			</view>
			<view class="iconfont icon-xiangxiabeifen"></view>
		</view>
<view class="back">
	<view class="datetab">
		<view class="itemdate " :class="tab==1?'act':''" @click="selecttab(1)">
			日
		</view>
		<view class="itemdate" :class="tab==2?'act':''" @click="selecttab(2)">
			周
		</view>
		<view class="itemdate" :class="tab==3?'act':''" @click="selecttab(3)">
			月
		</view>
	</view>
</view>

<view class="chartbox">
	<view class="charttitle">
		运动记录
	</view>
	<view class="chart">
		
	</view>
</view>
<view class="chartbox">
	<view class="charttitle">
		运动目标
	</view>
	<view class="topline">
		<view class="itemtop">
			<view class="topline">
				<view class="dian">
					
				</view>
				<view class="label">
					当前体重
				</view>
			</view>
			<view class="numline">
				<view class="num">
					68
				</view>
				<view class="danwei">
					Kg
				</view>
				<view class="iconfont icon-xiangxia4">
					
				</view>
			</view>
		</view>
		<view class="itemtop">
			<view class="topline">
				<view class="dian">
					
				</view>
				<view class="label">
					基线体重
				</view>
			</view>
			<view class="numline">
				<view class="num">
					68
				</view>
				<view class="danwei">
					Kg
				</view>
			</view>
		</view>
	</view>
	<view class="footbox">
		<view class="leftline">
			<view class="itemtop">
				<view class="topline">
					<view class="dian">
						
					</view>
					<view class="label">
						BMI
					</view>
				</view>
				<view class="numline">
					<view class="num">
						68
					</view>
					<view class="danwei">
					
					</view>
				</view>
			</view>
			<view class="itemtop">
				<view class="topline">
					<view class="dian">
						
					</view>
					<view class="label">
						减重
					</view>
				</view>
				<view class="numline">
					<view class="num">
						68
					</view>
					<view class="danwei">
						Kg
					</view>
				</view>
			</view>
			<view class="itemtop">
				<view class="topline">
					<view class="dian">
						
					</view>
					<view class="label">
						减脂
					</view>
				</view>
				<view class="numline">
					<view class="num">
						68
					</view>
					<view class="danwei">
						Kg
					</view>
				</view>
			</view>
			<view class="itemtop">
				<view class="topline">
					<view class="dian">
						
					</view>
					<view class="label">
					增肌
					</view>
				</view>
				<view class="numline">
					<view class="num">
						68
					</view>
					<view class="danwei">
						Kg
					</view>
				</view>
			</view>
		</view>
		<view class="imgbox">
			<image src="/static/image/瘦.png" mode=""></image>
			<image src="/static/image/胖.png" mode=""></image>
		</view>
	</view>
</view>
		
		
		
	<!-- 食材类别 -->
	
	<view class="bannerbox">
		<view class="bannertitlebox">
			全部运动
			<view class="titleline"></view>
		</view>
		<view class="list">
			<view class="listitem">
				
				<view class="iconfont icon-tiaosheng">
					
				</view>
				<view class="name">
					运动测试
				</view>
			</view>
			<view class="listitem">
				
				<view class="iconfont icon-tiaosheng">
					
				</view>
				<view class="name">
					拉伸运动
				</view>
			</view>
		</view>
	</view>
	
	
	
	
	<view class="bannerbox">
		<view class="bannertitlebox">
			运动处方
		</view>
		<view class="list">
			<view class="listitem">
				
				<view class="iconfont icon-tiaosheng">
					
				</view>
				<view class="name">
					运动处方
				</view>
			</view>
		</view>
	</view>
	
	<view class="bannerbox">
		<view class="bannertitlebox">
			器械/护具
		</view>
		<view class="list">
			<view class="ballitem">
				<view class="fang">
					<view class="iconfont icon-tiaosheng">
						
					</view>
				</view>
				<view class="name">
					跳绳
				</view>
			</view>
		</view>
	</view>
	


<view class="foodkutitle">
	<view class="title">
		我的运动方案
	</view>
	<view class="lable">
	
	</view>
	<view class="line"></view>
</view>


<view class="foodbox">
	<view class="titleline">
		<view class="left">
			运动处方1
		</view>
		<view class="lable">
			查看所有
		</view>
	</view>
	<view class="list">
		<view class="itemfood" @click="golashen">
			<image src="/static/image/fd456a1456416.jpg" mode=""></image>
			<view class="itemname">
				拉伸
			</view>
		</view>
	</view>
</view>
	
	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
			tab:1	
			}
		},

		onShow() {
			
			
		},
		methods: {
			selecttab(e){
				
				this.tab=e
			},
		golashen(){
			uni.navigateTo({
				url:'/pagesA/lashenyundong/lashenyundong'
			})
		},
		}
	}
</script>

<style lang="less" scoped>
.foodpage{
	width: 750rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	padding-bottom: 200rpx;
	
	.top{
		width: 100%;
		height: 320rpx;
		box-sizing: border-box;
		
		.swiper{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding:0 20rpx ;
			.swiper-item{
				width:99.5%;
				height: 99%;
				border-radius: 30rpx;
				box-sizing: border-box;
				position: relative;
	             border-radius: 30rpx;
				 border: 1px solid rgba(222,180,255,1);
				 background: linear-gradient(180deg, rgba(224,205,255,1) 0%,rgba(255,255,255,1) 100%);
				 box-sizing: border-box;
				 padding: 30rpx;
				 
				 .week{
					 line-height: 2.5;
				 }
				 .name{
					 font-size: 34rpx;
					 font-weight: bold;
					 line-height: 2.5;
				 }
				 .jieduan{
					 position: absolute;
					 right: 0;
					 top: 0;
					 width: 200rpx;
					 text-align: center;
					 border-radius: 10rpx;
					 height: 50rpx;
					 line-height: 50rpx;
					 background-color: rgba(243,232,253,1);
					 color: rgba(158,0,255,1);
					 border-top-right-radius: 30rpx;
				 }
				 .content{
					 margin-top: 30rpx;
				 }
			}
		}
	}
	.weekline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		background-color: white;
		.week{
			margin: 0 30rpx;
			font-weight: bold;
			color: rgba(158,0,255,1);
			font-size: 32rpx;
			font-family: OPPOSans-black;
		}
		.iconfont{
			color: #EDCFFF;
		}
	}
	.back{
		width: 100%;
		height: 120rpx;
		background-color: white;
		.datetab{
			width: 90%;
			height: 110rpx;
			display: flex;
			box-sizing: border-box;
			padding: 10rpx;
			border-radius: 20rpx;
			margin: auto;
			background-color: #F4F4F4 ;
			color:#656565  ;
			line-height: 90rpx;
			.itemdate{
				width:33%;
				height: 100%;
				text-align: center;
				border-radius: 20rpx;
			}
			.act{
				background-color: white;
				font-weight: bold;
				color: #494949 ;
			}
			
		}
	}
	.chartbox{
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 80rpx;
		.charttitle{
			height: 26rpx;
			line-height: 26rpx;
			border-left: 6rpx solid #9746FE;
			font-weight: bold;
			color: #575757;
			padding-left: 20rpx;
			font-size: 30rpx;
		}
		.topline{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.itemtop{
				width: 33%;
				.topline{
					display: flex;
					align-items: center;
					justify-content: center;
					.dian{
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color:#9E00FF  ;
						margin-right: 20rpx;
					}
					.label{
						font-weight: bold;
						color: #9A9A9A;
						font-size: 30rpx;
					}
				}
				.numline{
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 3;
					.num{
						font-size: 38rpx;
						font-weight: bold;
					}
					.danwei{
						margin-top: 20rpx;
						color: #BDBDBD;
					}
					.iconfont{
						color: #40CF3F;
					}
				}
				
			}
			
		}
		.footbox{
			width: 100%;
			height: 600rpx;
			display: flex;
			align-items: center;
			.leftline{
				width: 180rpx;
				height: 100%;
				.itemtop{
					width: 100%;
					.topline{
						display: flex;
						align-items: center;
						justify-content: center;
						.dian{
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							background-color:#9E00FF  ;
							margin-right: 20rpx;
						}
						.label{
							font-weight: bold;
							color: #9A9A9A;
							font-size: 30rpx;
						}
					}
					.numline{
						display: flex;
						align-items: center;
						justify-content: center;
						line-height: 3;
						.num{
							font-size: 38rpx;
							font-weight: bold;
						}
						.danwei{
							margin-top: 20rpx;
							color: #BDBDBD;
						}
						.iconfont{
							color: #40CF3F;
						}
					}
					
				}
			}
			.imgbox{
				flex: 1;
				display: flex;
				align-items: center;
				height: 100%;
				image{
					width: 50%;
					height: 100%;
				}
			}
		}
		.chart{
			width: 100%;
			height: 400rpx;
			background-color: red;
			margin-top: 20rpx;
		}
	}
	
	

	.bannerbox{
		width: 100%;
		height: 350rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 20rpx ;
		background-color: white;
		.bannertitlebox{
			font-weight: bold;
			font-size: 30rpx;
			position: relative;
			color: #575757;
			.titleline{
				width: 60rpx;
				height: 8rpx;
				background-color:#9E00FF;
				border-radius: 4rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		.list{
			width: 100%;
			height: 85%;
			
			margin-top: 20rpx;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			overflow-x: auto;
			.ballitem{
				width: 140rpx;
				height: 180rpx;
				text-align: center;
				.fang{
					width: 100rpx;
					height: 100rpx;
					background-color: #FFFBF0;
					border-radius: 10rpx;
					text-align: center;
					line-height: 120rpx;
					color:#9E00FF;
					margin: auto;
					.iconfont{
						font-size: 50rpx;
					}
				}
				.name{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			.listitem{
				height: 50rpx;
				line-height: 50rpx;
				padding: 5rpx 28rpx 5rpx 0;
				display: flex;
				margin-right: 30rpx;
				align-items: center;
				justify-content: space-between;
				border-radius: 20rpx;
				color:#585858;
				background-color: #F3E8FD;
				.dex{
					height: 100%;
					width: 40rpx;
					text-align: center;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					background-color: #ECD8FA;
					font-weight: bold;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin: 0 20rpx;
				}
				.name{
					font-size: 30rpx;
					font-weight: 700;
				}
			}
			
		}
	}
	.foodkutitle{
		display: flex;
		align-items: center;
		height: 32rpx;
		line-height: 32rpx;
		position: relative;
		margin: 50rpx 30rpx;
		.title{
			font-weight: bold;
			color: #575757;
		}
		.line{
			width: 60rpx;
			height: 8rpx;
			position: absolute;
			border-radius: 4rpx;
				background-color:#9E00FF;
				left: 0;
				bottom: -3rpx;
		}
	}
	.foodbox{
		width: 100%;
		background-color: white;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.titleline{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 30rpx;
			line-height: 30rpx;
			.left{
				border-left: 6rpx solid #a74cff;
			    font-size: 30rpx;
					font-weight: bold;
					padding-left: 14rpx;
					color: #575757;
			}
			.lable{
				font-size: 26rpx;
				color: gray;
				font-weight: bold;
			}
		}
		.list{
			width: 100%;
			
			margin: 20rpx 0;
			.itemfood{
				width: 310rpx;
				height: 210rpx;
				border-radius: 30rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
				.itemname{
					width: 100%;
					height: 42rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					border-bottom-left-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					text-align: center;
					line-height: 42rpx;
					font-size: 30rpx;
					
				}
			}
		}
	}
	
	
}
</style>
